在 web 表單設計中，我們會經(jīng)常遇到在開關、單選、復選框三個組件的選擇使用上糾結，特別是只有兩種狀態(tài)昆山做網(wǎng)站下，比如開啟/關閉、啟用/關閉、顯示/隱藏、同意/不同意、默認/自定義….我們發(fā)現(xiàn)使用 Switch 開關、Radio 單選和 Checkbox 復選這三個組件好像也都是可以的，這時應該選擇哪個組件更昆山做網(wǎng)站合適呢？

Switch 開關 ? 它就像是滅霸的響指

1. 簡要了解開關，開關作為仿照物理開關的映射，提供了兩種最為簡單、直接的對立選項，比如開/關、啟動/禁用等。它就像生活中控制燈泡的開關，點擊燈泡立即昆山做網(wǎng)站亮起。所以它的意符也必須明確，不然用戶都不知道，即將要啟動/關閉什么。

2. 開關組件的特點

1）對象標簽名稱須傳達清晰，能夠讓用戶能夠明確感知操作后的動作開啟或關閉什么；

2）主體標簽信息和按鈕是分離的，昆山做網(wǎng)站兩個視覺焦點；

3）一般點擊后會立即反饋；

4）沒有 hovering 效果，有動作效果，更適合手指操作；

5）非 W3C 組織官方 html 標記，極端情況不支持 Javascript。

3. 蘋果公司對開昆山做網(wǎng)站關組件的設計規(guī)范

蘋果的「Human Interface Guidelines」有著這么一份對于開關組件的使用規(guī)范定義，我們不妨可以借鑒。

1) 避免使用開關控制局部細節(jié)或者次要的設置。開關的視覺權重比較昆山做網(wǎng)站高，所以用它控制內(nèi)容較多更為合適，比如可以將它作為總開關打開或關閉一組設置。

2) 通常不要用開關替代復選框。如果我們的規(guī)范中定義了復選框，則盡可能保持一致的使用規(guī)范。

4. 開關使用場景舉例

通過上述對開昆山做網(wǎng)站關組件特點，結合蘋果組件的規(guī)范，我們基本可以梳理出以下幾條主要使用場景：

1）開關的標簽意符需傳達清晰

和單選、復選框不一樣的是，因為開關主體的信息和按鈕是分離的。

用戶在點擊開關按鈕前，必須清晰告知用戶點昆山做網(wǎng)站擊后會發(fā)生什么，甚至有時我們需要通過增加副標題來加以說明。

2）一般只為立即生效的場景使用開關按鈕

在表單填寫時，往往最終會有「提交」按鈕作為結束態(tài)，開關作為表單字段的填寫，用戶點擊后并不能夠立即生效，而昆山做網(wǎng)站是需要再次點擊「提交」按鈕。

3）有風險，需著重提醒用戶

開關的視覺權重較高，在復雜的表單信息中，它能夠很快吸引到用戶的注意力，并能夠給用戶以視覺提醒。

4）避免大面積使用開關，使用它控制局部細節(jié)或者次要設昆山做網(wǎng)站置

開關在視覺感知上它和按鈕上有些接近，所以盡可能避免在表單中大量使用開關來控制局部層級內(nèi)容，這時推薦使用復選框來替代開關作為局部。

5）把它作為高層級內(nèi)容控制或信息設置

把它用來作為總控制來顯示更高層級內(nèi)昆山做網(wǎng)站

Checkbox 復選框 ? 它是一個機器小能手

1. 簡要了解復選框，昆山做網(wǎng)站讓用戶在兩個布爾值之間進行選擇，勾選后和未勾選表示“是/否、要/不要、開啟/關閉…” 等問題。以下內(nèi)容主要討論單個復選框的使用情況。

2. 復選框的特點

1）為了便于用戶快速理解，一般復選框的標簽內(nèi)容是一昆山做網(wǎng)站句話，不會用逗號去作隔開。

2）作為單選狀態(tài)時，操作對象和標簽主體內(nèi)容視覺焦點是不分開的，選擇后就知道它被選中了。

3）可直接表示標簽內(nèi)容的開啟、關閉。

3. 場景舉例分析

1) 用戶基本清楚會發(fā)生什么，使用昆山做網(wǎng)站復選框

如果使用開關或者單選框，我們會發(fā)現(xiàn)視覺干擾特別嚴重，一般表單內(nèi)容不需要特別去強調(diào)每一個字段的開啟狀態(tài)。當然如果排版限制，我們也是可以將復選框放到標簽的右側（放右側復選框需對齊）。

2）表單中的復選昆山做網(wǎng)站框生效，需要配合提交按鈕

一般情況下，表單填寫中，復選框不會像開關點擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看他們填寫的表單，更有助于在信息防錯。（Ps. 在設置頁，復選框可單獨作為設昆山做網(wǎng)站置且立即生效。）復選框的主體標簽信息和復選按鈕在一起，特別是對于批量填寫或設置一批字段，使用復選框效率更高。

3）用復選框來控制表單局部細節(jié)

如上述，如果控制對象的功能是表單的一個局部，或信息內(nèi)容不是很多昆山做網(wǎng)站，用戶也清楚知道選擇后會是什么，這時候復選框更適合。這時我們不需要過重的給用戶強調(diào)什么，用復選框會比使用開關讓整個表單的結構內(nèi)容更清晰。

Radio 單選按鈕 ? 白天不懂夜的黑

1. 簡要了解單選按鈕

單昆山做網(wǎng)站選按鈕最早的設計模型，來源于收音機切換頻道的按鍵，當我們按下其中一個，其他的按鈕就會被彈出，按下的那個按鈕就成為了選中的狀態(tài)。單選按鈕可謂是涇渭分明，有你不能有我。

2. 單選按鈕的特點

單選按鈕的優(yōu)點是昆山做網(wǎng)站，將所有信息條件暴露給到用戶，它不像開關在使用上帶有去猜測、探索的必要。

1）每個選擇都非常直觀，如果希望用戶閱讀完所有選項，用它再好不過了。

昆山做網(wǎng)站兩個以上選擇。

3）必須提供默認值，且默認值可以承載內(nèi)容。

3. 場景舉例分析

1）需要讓用戶明確知道兩者的區(qū)別，甚至需要強調(diào)兩個選項的不同

如果采用復選框，用戶需要在兩個差距較大的選項中去作思考。

2）開啟/昆山做網(wǎng)站關閉的單選狀態(tài)，使用復選框

復選框對于絕大多數(shù)用戶都是非常清楚，使用復選框在空間、視覺焦點更是更集中的，所以如果只針對開啟/關閉的狀態(tài)，推薦使用復選框。

3）每個選項都關聯(lián)內(nèi)容時，使用單選按鈕

我們知道，如昆山做網(wǎng)站果默認選項設計的好，會讓很多人保持選擇默認選項。下圖這個案例，如果采用復選框或者開關，用戶就不得不去探索思考開啟后是什么，還要擔心理解開啟/關閉后帶來的影響，而對于絕大多數(shù)用戶來說，這邊的報名設置系統(tǒng)昆山做網(wǎng)站默認內(nèi)容無需改動。需注意給用戶提供的默認選擇，一定要是安全、方便的選項。

4）較長需隱藏拆分的內(nèi)容情況，使用單選按鈕

在表單設計中，如果遇到的內(nèi)容需要重新組織或者拆分時，選擇使用單選按鈕。這樣不僅能夠做到昆山做網(wǎng)站表單信息簡潔，也能夠提高用戶的瀏覽效率。

5）垂直排列單選，信息閱讀更佳

如果字段名稱較長，需要添加副標題加以說明，這時單選按鈕承載的信息較多，使用垂直排列讓用戶有一致的起始閱讀線，眼球轉動幅度最小，信息昆山做網(wǎng)站獲取體驗更佳。如果標簽文字較少，也可以橫排不至于占用太多的垂直空間。